<template>
	<div v-show="showPage">
		<div style="border-bottom: 1px solid #ddd;">
			<h3>条件样式配置</h3>
		</div>
		<div style="margin-top: 10px;">
			<el-button type="primary" @click="onAddClickHandler" size="mini">增加</el-button>
			<el-table :data="styleData" style="width: 100%;" size="mini" border="true" stripe="true">
				<el-table-column label="动作" width="100">
					<template #default="scope">
						<el-button type="primary" @click="onDeleteClickHandler(scope.row)" size="mini">
							删除</el-button>
					</template>
				</el-table-column>
				<el-table-column label="字段" width="200">
					<template #default="scope">
						<el-select size="mini" v-model="scope.row.field" placeholder="请选择" clearable filterable>
							<el-option v-for="item in fieldList" :key="item.columnName" :label="item.name"
								:value="item.columnName">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="条件">
					<template #default="scope">
						<el-input v-model="scope.row.condition"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="样式">
					<template #default="scope">
						<el-input v-model="scope.row.style"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: "FieldConditionStylePage",
		props: ["scope"],
		data() {
			return {
				showPage: false,
				fieldList: [],
				styleData: [],
				tableName: "",
			}
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"detailreportdesigner/initFieldConditionStylePage?code=" + this.scope[
					"code"]).then(
					function(response) {
						if (response.data.code == 1) {
							if(response.data.styleData!=null){
								that.styleData=response.data.styleData;
							}
						}
					});
			},
			setVisible(visible) {
				this.showPage = visible;
				if (visible) {
					var tableName = this.scope["dataSourceConfigPage"]["tableName"];
					if (this.tableName != tableName) {
						this.tableName = tableName;
						this.fieldList = this.scope["displayFieldConfigPage"]["fieldList"];
						if(this.styleData.length==0){
							this.init();
						}
					}
				}
			},
			getReturnData() {
				var data = {
					"styleData": this.styleData
				};
				return data;
			},
			getPreviousPage() {
				return "displayFieldConfigPage";
			},
			getNextPage() {
				return "detailReportPreviewPage";
			},
			isCompletedPage() {
				return false;
			},
			onAddClickHandler() {
				var item = {
					"field": "",
					"condition": "",
					"style": ""
				};
				this.styleData.push(item);
			},
			onDeleteClickHandler(row) {
				for (var i = 0; i < this.styleData.length; i++) {
					if (this.styleData[i].field == row.field && this.styleData[i].condition == row.condition) {
						this.styleData.splice(i, 1);
						break;
					}
				}
			}
		},
	}
</script>

<style>
</style>
